<template>
  <div>
    <a-modal
      v-model:visible="visible"
      title="年度总结"
      @cancel="visible = false"
      width="100%"
      class="annualAssessment-handle-modal"
    >
    <div style="text-align: right;padding: 20px 50px 0 0;">
      <a-button
        v-if="formState.fhjmc =='个人总结'"
        class="blue-btn"
        @click="addTrainLogs"
        style="margin-right: 10px;">
        添加培训情况
      </a-button>
      <a-button
        v-if="formState.fhjmc == '我的已办'"
        slot="tabBarExtraContent"
        v-print="printObj"
        class="print-btn">
        打印
      </a-button>
    </div>
      <div id="printTest" v-if="visible" :key="registerKey">
        <h1 style="text-align: center;">xx职业化专业化药品审评员<br/>年度工作情况统计表</h1>
        <p class="yearTitle">
          <span>考核年度:</span>
          <span>{{ formState.fyear }}</span>
        </p>
        <a-form :form="cform" ref="form">
          <table border="1" cellspacing="0" class="annualAssessment-table">
            <tr>
              <th>姓名</th>
              <td>{{ formState.fusermc }}</td>
              <th>工作单位</th>
              <td colspan="3">{{ formState.fgzdw }}</td>
            </tr>
            <tr>
              <th>审评企业<br/>总数(家)</th>
              <td>{{ formState.fjcqyzs }}</td>
              <th>担任组长(次)</th>
              <td>{{ formState.fdrzzcs }}</td>
              <th>担任组员(次)</th>
              <td>{{ formState.fdrzycs }}</td>
            </tr>
            <tr>
              <th>中心选派次数</th>
              <td>{{ formState.fzxxpcs }}</td>
              <th>实际审评次数</th>
              <td>{{formState.fsjjccs}}</td>
              <th>出勒率</th>
              <td>{{ Number(formState.fcql * 100) + '%'}}</td>
            </tr>
            <tr>
              <th :rowspan="trainList.length > 0?trainList.length+1:1">参加培训情况</th>
              <!-- <th rowspan="1">参加培训情况{{ trainList.length }}</th> -->
              <th>培训时间</th>
              <th>培训内容</th>
              <th>培训单位</th>
              <th>学时</th>
              <th>备注</th>
            </tr>
            <tr v-for="(item,index) in trainList" :key="index">
              <td style="text-align: left;line-height: 1 !important;">{{ item.fpxkssj + ' 至 ' + item.fpxjssj }}</td>
              <td>{{ item.fpxnr }}</td>
              <td>{{ item.fzzdw }}</td>
              <td>{{ item.fpxxs }}</td>
              <td>{{ item.fbz }}</td>
              <a-button v-if="formState.fhjmc =='个人总结'" class="blue-btn" @click="delTrain(item)" style="margin: 10px;">删除该条</a-button>
            </tr>
            <tr v-if="formState.fhjmc !=='个人总结'">
              <th rowspan="2">日常考核</th>
              <th>优秀次数</th>
              <th>优秀率</th>
              <th>合格次数</th>
              <th>合格率</th>
              <th>不合格次数</th>
            </tr>
            <tr v-if="formState.fhjmc !=='个人总结'">
              <td>{{ formState.frckhyxcs?formState.frckhyxcs:'暂无数据' }}</td>
              <td>{{ formState.frckhyxl?formState.frckhyxl:'暂无数据' }}</td>
              <td>{{ formState.frckhhgcs?formState.frckhhgcs:'暂无数据' }}</td>
              <td>{{ formState.frckhhgl?formState.frckhhgl:'暂无数据' }}</td>
              <td>{{ formState.frckhbhgcs?formState.frckhbhgcs:'暂无数据' }}</td>
            </tr>
            <tr>
              <th><span style="color: red;" v-if="formState.fhjmc =='个人总结'">*</span>年度工作小结</th>
              <td colspan="5">
                <a-form-item prop="fjbzbsy">
                  <a-textarea
                    v-if="formState.fhjmc =='个人总结'"
                    v-model="formState.fndszbg"
                    placeholder="请填写年度工作小结"
                    :auto-size="{ minRows: 5, maxRows: 7 }"
                    v-decorator="['fndszbg',{ initialValue:formState.fndszbg, rules: rules.fndszbg}]"
                  />
                  <p v-else style="text-align: left;padding: 0 10px;">{{ formState.fndszbg }}</p>
                </a-form-item>
              </td>
            </tr>
            <tr v-if="formState.fhjmc !=='个人总结'">
              <th><span style="color: red;" v-if="formState.fhjmc =='考评审核'">*</span>年度考核</th>
              <td colspan="5">
                <a-form-item prop="fndzhkpjg">
                  <a-radio-group
                    v-if="formState.fhjmc =='考评审核'"
                    v-model="formState.fndzhkpjg"
                    @change="checkChange($event.target.value)"
                    :options="checkArray"
                    v-decorator="['fndzhkpjg',{ initialValue:formState.fndzhkpjg, rules: rules.fndzhkpjg}]"
                  />
                  <div v-else style="display: flex;flex-wrap: nowrap;align-items: center;padding-left: 10px;">
                    <span v-for="nape in plainOptions" style="padding-right: 20px;display: flex;align-content: center;">
                        <span v-if="formState.fndzhkpjg == nape.itemText" style="font-size: 20px;">☑</span>
                        <span style="line-height: 2;font-size: 20px;" v-else>☐</span>
                        <span>{{ nape.itemText }}</span>
                    </span>
                  </div>
                </a-form-item>
              </td>
            </tr>
          </table>
        </a-form>
      </div>
      <a-modal
        title="退回提示"
        :visible="returnVisible"
        :confirm-loading="confirmLoading"
        @ok="segmentSubmitClick(3)"
        @cancel="(returnVisible = false,returnOption = '')"
      >
      <a-textarea
        v-model="returnOption"
        placeholder="请填写退回意见"
        :auto-size="{ minRows: 3, maxRows: 5 }"
      />
      </a-modal>
      <template slot="footer">
        <div v-if="formState.fhjmc == '我的已办'">
          <a-button class="blue-btn" @click="visible = false">关闭</a-button>
        </div>
        <div v-else>
          <span v-if="formState.fhjmc !== '考评登记' && formState.fhjmc !== '个人总结'" style="margin-left: 10px;">
              <a-button class="red-btn" @click="returnVisible = true">退回</a-button>
          </span>
          <span style="margin-left: 10px;">
              <a-button class="blue-btn" type="primary" @click="segmentSubmitClick(1)">保存</a-button>
          </span>
          <span style="margin-left: 10px;">
              <a-button :loading="loading" class="blue-btn" type="primary" @click="segmentSubmitClick(2)" >提交</a-button>
          </span>
        </div>
      </template>
      <trainModal ref="trainModalRef" :idd="formState.ndkpid" @selectFuntion="selectFuntion"></trainModal>
    </a-modal>
  </div>
</template>
<script>
import {
    deleteBatchIdeaServe,
    handlingOpinionsListServe,
    saveFlow,
    submitFlow,
    returnUpperFlowJob,
    addBatchIdeaServe,
    getDictListByDictCode,
    queryNdpxjlByNdkpId,
    deleteNdpxjl,
    verifyNdpxsc,
 } from './service/index'
import trainModal from './trainLogs'
export default {
  components: {
    trainModal
  },
  data() {
    return {
      visible: false,
      checkArray: [
        { label: "优秀", value: "优秀" },
        { label: "合格", value: "合格" },
        { label: "不合格", value: "不合格" },
      ],
      formState:{},
      xiaojie: '',
      cform:this.$form.createForm(this, { name: 'cform' }),
      rules:{
        fsxmc: [{
            required: true,
            message: '请选择事项名称',
            trigger: 'blur',
        }],
        fsqsj: [{
            type:'object',
            required: true,
            message: '请选择申请时间',
            trigger: 'blur',
        }],
        opinion: [{
            required: true,
            message: '请输入办理意见',
            trigger: 'blur',
        }],
        fndzhkpjg: [{
            required: true,
            message: '请选择考评审核意见',
            trigger: 'blur',
        }],
        fndszbg: [{
            required: true,
            message: '请输入年度述职报告',
            trigger: 'blur',
        }],
      },
      // 打印
      printObj:{
        id:"printTest", //需要打印的id名称
        popTitle:"xx职业化专业化药品审评员年度工作情况统计表",//文档的名称
        // preview:true,//预览功能，不好用
        zIndex:'20002',
        beforeOpenCallback(vue){},
        openCallback (vue) {
          //打开之前
        },
        closeCallback (vue) {
          //关闭了打印工具
        },
      },
      plainOptions:[],
      loading: false,
      returnVisible: false,
      returnOption: '',
      confirmLoading: false,
      trainList: [],
      registerKey: ''
    }
  },
  mounted(){

  },
  methods: {
    getData(val){
      this.trainList = []
      this.formState = val
      //console.log('环节名称',this.formState.fhjmc)
      //console.log('获得的数据：',this.formState)
      getDictListByDictCode({dictCode:'pddj001'}).then(res=>{
        if(res.code == 200){
            this.plainOptions = res.result
        }
      })
      queryNdpxjlByNdkpId({id:this.formState.ndkpid}).then(res => {
        this.trainList = res.result
      })
    },
    checkChange(val){},
    segmentSubmitClick(val){
      var that = this
      if(val == 1){
          let data = {
              fywflcode:this.formState.fywflcode,
              jobid:this.formState.jobid,
              ndkpid:this.formState.ndkpid,
              map:{
                  fsfcykp:this.formState.fsfcykp,
                  fusermc:this.formState.fusermc,
                  fgzdw:this.formState.fgzdw,
                  fdqssk:this.formState.fdqssk,
                  fyear:this.formState.fyear,
                  fljzlqk:this.formState.fljzlqk,
                  fsjjccs:this.formState.fsjjccs,
                  fzxxpcs:this.formState.fzxxpcs,
                  fcql:this.formState.fcql,
                  fcjjcqk:this.formState.fcjjcqk,
                  fcjjxjyqk:this.formState.fcjjxjyqk,
                  frcywnlkhqk:this.formState.frcywnlkhqk,
                  fgrndzjqk:this.formState.fgrndzjqk,
                  fndzhkpjg:this.formState.fndzhkpjg,
                  fbz:this.formState.fbz,
                  fthyj:this.formState.fthyj,
                  fndszbg:this.formState.fndszbg,
              }
          }
          saveFlow(data).then(res=>{
              if(res.code == 200){
                  this.$message.success(res.message)
                  this.$emit('success')
              }else{
                  this.$message.warning(res.message)
              }
          })
      }else if(val == 2){
          //console.log(1111)
          if(this.formState.fhjmc !== '个人总结'){
              //console.log(222)
              let validateData=[]
              if(this.formState.nextNode == '流程结束'){
                  validateData = ['opinion']
                  //console.log(333)
              }else{
                  validateData = ['dbrid', 'opinion']
              }
              that.cform.validateFields((err, values) => {
                  if(!err){
                      this.loading = true
                      let data = {
                          fywflcode:this.formState.fywflcode,
                          jobid:this.formState.jobid,
                          ndkpid:this.formState.ndkpid,
                          dbrid:values.dbrid?values.dbrid.join(','):'',
                          opinion:values.opinion,
                          map:{
                              fsfcykp:this.formState.fsfcykp,
                              fusermc:this.formState.fusermc,
                              fgzdw:this.formState.fgzdw,
                              fdqssk:this.formState.fdqssk,
                              fyear:this.formState.fyear,
                              fljzlqk:this.formState.fljzlqk,
                              fsjjccs:this.formState.fsjjccs,
                              fzxxpcs:this.formState.fzxxpcs,
                              fcql:this.formState.fcql,
                              fcjjcqk:this.formState.fcjjcqk,
                              fcjjxjyqk:this.formState.fcjjxjyqk,
                              frcywnlkhqk:this.formState.frcywnlkhqk,
                              fgrndzjqk:this.formState.fgrndzjqk,
                              fndzhkpjg:this.formState.fndzhkpjg,
                              fbz:this.formState.fbz,
                              fthyj:this.formState.fthyj,
                          }
                      }
                      submitFlow(data).then(res=>{
                          if(res.code == 200){
                              this.$message.success(res.message)
                              this.$emit('success')
                              this.visible = false
                          }else{
                              this.$message.warning(res.message)
                          }
                          this.loading = false
                      })
                  }
              })
          }else{
            this.cform.validateFields((err, values) => {
                  if(!err){
                      this.loading = true
                      let data = {
                          fywflcode:this.formState.fywflcode,
                          jobid:this.formState.jobid,
                          ndkpid:this.formState.ndkpid,
                          dbrid:this.formState.dbrid.join(','),
                          opinion:this.formState.opinion,
                          map:{
                              fsfcykp:this.formState.fsfcykp,
                              fusermc:this.formState.fusermc,
                              fgzdw:this.formState.fgzdw,
                              fdqssk:this.formState.fdqssk,
                              fyear:this.formState.fyear,
                              fljzlqk:this.formState.fljzlqk,
                              fsjjccs:this.formState.fsjjccs,
                              fzxxpcs:this.formState.fzxxpcs,
                              fcql:this.formState.fcql,
                              fcjjcqk:this.formState.fcjjcqk,
                              fcjjxjyqk:this.formState.fcjjxjyqk,
                              frcywnlkhqk:this.formState.frcywnlkhqk,
                              fgrndzjqk:this.formState.fgrndzjqk,
                              fndzhkpjg:this.formState.fndzhkpjg,
                              fbz:this.formState.fbz,
                              fthyj:this.formState.fthyj,
                              fndszbg:values.fndszbg,
                          }
                      }
                      verifyNdpxsc({id:this.formState.ndkpid}).then(res => {
                        if(!res.result){
                          var that = this
                          that.$confirm({
                            title: '当前年度培训时长小于60小时，您确定要提交当前总结吗?',
                            content: '',
                            okText: '确定',
                            okType: 'info',
                            cancelText: '取消',
                            onOk() {
                              submitFlow(data).then(res=>{
                                if(res.code == 200){
                                  that.$message.success(res.message)
                                  that.$emit('success')
                                  that.visible = false
                                }else{
                                  that.$message.warning(res.message)
                                }
                                that.loading = false
                              })
                            },
                            onCancel() {
                              //console.log('Cancel');
                              that.loading = false
                            },
                          });
                        } else {
                          submitFlow(data).then(res=>{
                              if(res.code == 200){
                                  this.$message.success(res.message)
                                  this.$emit('success')
                                  this.visible = false
                              }else{
                                  this.$message.warning(res.message)
                              }
                              this.loading = false
                          })
                        }
                      })
                  }else{
                      this.activeKey = '审评工作统计及工作总结'
                  }
              })
          }
      }else if(val == 3){
        // that.cform.validateFields((err, values) => {
          //console.log(this.returnOption)
              if(this.returnOption){
                  this.confirmLoading = true
                  let data = {
                      fywflcode:this.formState.fywflcode,
                      jobid:this.formState.jobid,
                      ndkpid:this.formState.ndkpid,
                      opinion:this.returnOption,
                  }
                  returnUpperFlowJob(data).then(res=>{
                      if(res.code == 200){
                          this.$message.success(res.message)
                          this.$emit('success')
                          this.returnVisible = false
                          this.visible = false
                          this.returnOption = ''
                      }else{
                          this.$message.warning(res.message)
                      }
                      this.confirmLoading = false
                  })
              } else {
                this.$message.warning('请填写退回意见！')
              }
          // })
      }
    },
    addTrainLogs(){
      //console.log(this.formState)
      this.$refs.trainModalRef.visible = true
    },
    selectFuntion(){
      // //console.log(val)
      this.trainList = []
      queryNdpxjlByNdkpId({id:this.formState.ndkpid}).then(res => {
        this.trainList = res.result
      })
      this.registerKey = Date.now()
    },
    delTrain(item){
      var that = this
      that.$confirm({
        title: '您确定要删除当前培训情况吗?',
        content: '',
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        onOk() {
          deleteNdpxjl({id:item.id}).then(res=>{
            if(res.code == 200){
              that.$message.success(res.message)
              that.selectFuntion()
            }else{
              that.$message.warning(res.message)
            }
          })
        },
        onCancel() {
          //console.log('Cancel');
        },
      });
    }
  },
}
</script>
<style lang="less">
.annualAssessment-handle-modal {
  .ant-steps-item-title{
      font-weight: 600 !important;
      font-size: 18px;
  }
  .ant-modal {
      max-width: 100%;
      top: 0;
      padding-bottom: 0;
      margin: 0;
  }
  .ant-modal-content {
      display: flex;
      flex-direction: column;
      height: calc(100vh);
      background-color: #fff;
  }
  .ant-modal-body {
      flex: 1;
      padding: 12px;
      position: relative;
      background-color: #fff;
      height: calc(100vh - 50px);
  }
}
.yearTitle {
  display: flex;
  width: 794px;
  margin: 0 auto;
  justify-content: end;
  font-size: 18px;
  padding-right: 25px;
  span {
    margin: 0 10px;
  }
}
.annualAssessment-table {
  width: 794px;
  margin: 0 auto;
  margin-top: 4mm;
  font-size: 16px;
  th {
    text-align: center;
    font-size: 18px;
    line-height: 2;
    padding: 0px;
    min-width: 130px;
  }
  td {
    min-width: 130px;
    text-align: center;
    line-height: 2;
    // color: black;
    padding: 0px 5px !important;
    font-size: 18px;
    font-weight: 600;
    font-family: 'SimSun';
    word-wrap:break-word;
    word-break:break-all;
    white-space:normal;
    .ant-form-item {
      margin-bottom: 0 !important;
    }
  }
}
</style>
